require('./Pagewdjdetail.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import {Control} from 'react-keeper';
import loufang  from './../../../assets/img/楼房.png';
import dagou  from './../../../assets/img/打勾.png';
import dacha  from './../../../assets/img/打叉.png';


class Wdjdetail extends React.Component {

  constructor(props) {
    super(props);
  }


  render() {
    return (
      <div>
        <Panel>
          <PanelBody>
            <MediaBox  style={{
              width:"56%",
              float:"left"
            }} type="appmsg">
              <MediaBoxHeader>
                <img src={loufang} style={{
                  width:35,
                  height:35,
                  marginTop:15
                }}/>
              </MediaBoxHeader>
              <MediaBoxBody>
                <MediaBoxDescription>
                  <span className="pname">{this.state.wdjdetail.dataDetail.title}</span>
                </MediaBoxDescription>
                <MediaBoxDescription>
                  <br/>
                  {this.state.wdjdetail.dataDetail.createTime}
                </MediaBoxDescription>
              </MediaBoxBody>
            </MediaBox>

            <MediaBox  style={{
              width:"27%",
              float:"left",
            }} type="appmsg">
              <MediaBoxBody>
                <MediaBoxTitle>
                  <img src={dagou} style={{
                    float:"left",
                    width:16,
                    height:16,
                    marginTop:5
                  }}/>
                  <span className="greyfont">
                          竣工验收备案
                          </span>
                </MediaBoxTitle>
                <MediaBoxTitle style={{
                  marginTop:10
                }}>
                  <img src={dacha} style={{
                    float:"left",
                    width:16,
                    height:16,
                    marginTop:5
                  }}/>
                  <span className="greyfont">
                          使用备案
                          </span>
                </MediaBoxTitle>
              </MediaBoxBody>
            </MediaBox>
          </PanelBody>

          <PanelHeader style={{
            float:"left",
            width:"100%",
            padding:0
          }}>
          </PanelHeader>
          <PanelBody style={{
            marginTop:15,
            float:"left",
            width:"35%"
          }}>
            <span className="spanDetail">规划证</span>
            <br/>
            <br/>
            <span className="spanDetail">土地使用</span>
            <br/>
            <br/>
            <span className="spanDetail">图审合格证</span>
            <br/>
            <br/>
            <span className="spanDetail">施工许可证</span>
            <br/>
            <br/>
          </PanelBody>

          <PanelBody style={{
            marginTop:15,
            float:"left",
            width:"60%"
          }}>
            <span className="spanDetailDisplay">GHXK123456789</span>
            <br/>
            <br/>
            <span className="spanDetailDisplay">GHXK123456789</span>
            <br/>
            <br/>
            <span className="spanDetailDisplay">GHXK123456789</span>
            <br/>
            <br/>
            <span className="spanDetailDisplay">GHXK123456789</span>
            <br/>
            <br/>
          </PanelBody>

          <PanelBody style={{
            width:"100%",
            float:"left"
          }}>
            <br/>
            <span className="spanDetail">房屋保修期限</span>
            <div className="pmGrid">
              <Flex>
                <FlexItem>
                  <div className="placeholder">单项工程</div>
                </FlexItem>
                <FlexItem>
                  <div className="placeholder">保修期限</div>
                </FlexItem>
              </Flex>

              <Flex>
                <FlexItem>
                  <div className="placedata2"></div>
                </FlexItem>
                <FlexItem>
                  <div className="placedata2"></div>
                </FlexItem>
              </Flex>

              <Flex>
                <FlexItem>
                  <div className="placedata2"></div>
                </FlexItem>
                <FlexItem>
                  <div className="placedata2"></div>
                </FlexItem>
              </Flex>
            </div>
          </PanelBody>
        </Panel>
      </div>
    );
  }

  componentWillMount() {
    if(Control.state){
      Actions.loadData(Control.state.dataDetail)
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.wdjdetail || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Wdjdetail, Reflux.connect(Store, 'wdjdetail'));


export default Wdjdetail ;
